<template>
    <div class="app">
           <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in msgList">
                    <router-link v-bind='{to:"/news/newsinfo/"+item.id}'>
                        <img class="mui-media-object mui-pull-left" :src="item.img_url">
                        <div class="mui-media-body">
                            <p class='mui-ellipsis'>{{item.title}}</p>
                            <p>
                                发表时间:{{item.add_time | fmtdate('YYYY-MM-DD')}}
                                <span>点击数:{{item.click}}</span>
                            </p>
                        </div>
                    </router-link>
                </li>
                
            </ul>
        
    </div>
</template>

<script>
    //导入api的URL
    import common from '../../kits/common.js';

    export default{
        created(){
            this.getNewsList();
        },
        data(){
            return {
                msgList:[]
            }
        },
        methods:{
            //发送ajax请求获得新闻详情页的数据
            getNewsList:function () {
                var url = common.apihost + '/api/getnewslist';
                this.$http.get(url).then(result=>{
                   let message = result.body.message;
                   this.msgList = message;
                },(res)=>{
                    console.log('图问资讯获取失败');
                })
            }
        }
    }
</script>

<style scoped>
    .mui-table-view li {
        
        height: 80px;
        padding: 11px 15px;
    }
    .mui-table-view .mui-table-view-cell > a{
        text-align: left;
        font-size: 12px;
        height: 80px;
    }
    .mui-table-view .mui-media-object.mui-pull-left{
        max-width: 62px;
            height: 62px;
            line-height: 62px;
    }
     .mui-media-body .mui-ellipsis{
        margin-bottom: 20px;
     }
    .mui-media-body p{
        font-size:12px;
    }
    .mui-media-body p:nth-of-type(2){
        color: #0094ff;

    }
    .mui-media-body p:nth-of-type(2) span{
        float: right;
    }

</style>